<!DOCTYPE html>
<html ng-app="ZIT">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<title>PhoneGap实战教程</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
	var app = angular.module("ZIT", ["ionic"]);
	
	app.constant('$ionicLoadingConfig', {
		template: '<i class="ion ion-loading-a"></i> 努力加载数据中……'
	});

	app.controller("MainAct", function($scope) {
		$scope.appHost = "127.0.0.1:8088";
		$scope.appServer = "http://127.0.0.1:8088/app-server/index.html";
		
		$scope.$watch("appHost", function(newValue, oldValue, scope) {
			$scope.appServer = "http://" + newValue + "/app-server/index.html";
			console.log("AppHost：" + newValue + ", AppServer：" + $scope.appServer);
		});
	});
</script>
</head>

<body>
	<ion-header-bar class="bar-positive">
	<h1 class="title">PhoneGap实战教程</h1>
	</ion-header-bar>

	<ion-content class="padding">
	<div class="list" ng-controller="MainAct">
		<div>PhoneGap服务器IP和端口，如：meta.coding.io</div>
		<label class="item item-input"><input type="text" ng-model="appHost" placeholder="服务器地址" /></label>
		<a class="button button-block button-assertive" href="{{appServer}}">进入实战教程</a>
	</div>
	<div class="item item-text-wrap">
		<div>
			<h2>
				<strong>本教程主要包含以下几个方面的内容：</strong>
			</h2>
		</div>
		<div>1、本教程UI基于ionic框架，其实也是对ionic的一个教程；</div>
		<div>2、本教程部分功能展示只能基于手机终端，因为浏览器对有些功能是不支持的，如蜂鸣声、振动等；</div>
		<div>3、本教程的所有代码均免费开源，可以任意修改和使用，但是对于程序中的BUG、版本升级不兼容等问题，敬请通知我进行完善；</div>
		<div>4、我的邮箱：obullxl@gmail.com，对于技术上的探讨，欢迎联系我；</div>
		<div>5、本教程源代码地址：https://git.oschina.net/atom/node-meta.git</div>
	</div>
	</ion-content>
</body>
</html>
